<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #canvas {
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    const canvas = document.getElementById('canvas')
    const ctx = canvas.getContext('2d')
    const WIDTH = document.documentElement.clientWidth
    const HEIGHT = document.documentElement.clientHeight
    canvas.width = WIDTH
    canvas.height = HEIGHT
    const param = {
      num: 100,
      color: false,//  颜色  如果是false 则是随机渐变颜色
      r: 0.9, //   圆每次增加的半径
      o: 0.09, //      判断圆消失的条件，数值越大，消失的越快
      a: 1
    }
    let color, color2, round_arr = []
    window.onmousemove = function (event) {
      const mouseX = event.clientX
      const mouseY = event.clientY
      round_arr.push({
        mouseX,
        mouseY,
        r: param.r,  // 圆的班级
        o: 1   //  透明度 opacity
      })
    }

    // 判断参数中是否设置了 color，如果设置了 color，就使用该值、
    // 如果参数中的 color 为 false，那么就使用随机的颜色
    if (param.color) {
      color2 = param.color
    } else {
      color = Math.random() * 360
    }

    function animate() {
      if(!param.color) {
        color += 0.1
        color2 = 'hsl(' + color + ',100%,80%)';
      }
      ctx.clearRect(0, 0, WIDTH, HEIGHT)
      for (let i = 0; i < round_arr.length; i++) {
        ctx.fillStyle = color2
        ctx.beginPath()
        ctx.arc(round_arr[i].mouseX, round_arr[i].mouseY, round_arr[i].r, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fill()
        round_arr[i].r += param.r
        round_arr[i].o -= param.o
        if (round_arr[i].o < 0) {
          round_arr.splice(i, 1)
          i--
        }
      }
      window.requestAnimationFrame(animate)
    }

    animate()
  </script>
</body>
</html>